import { FC } from "react";
import { CompProps } from "../../types/comp";
import { Card, Popconfirm, Tag, Typography } from "antd";
import styles from "./ListItem.module.css";
import classNames from "classnames";
import { get, map } from "lodash";

type Props = {
  data: any;
  onDetail?: () => void;
  onDelete?: () => void;
};

const ListItm: FC<Props & CompProps> = ({ data, onDetail, onDelete }) => {
  const isAnalysisIng = ["analyze", "exception"].includes(data.state);
  return (
    <Card
      className="m-[15px] max-w-[1200px] cursor-pointer text-[16px]"
      hoverable
      onClick={() => {
        !isAnalysisIng && onDetail?.();
      }}
      // style={{
      //   background: isAnalysisIng
      //     ? "rgba(255, 255, 0, 0.2)"
      //     : get(data, "pattern_info.length", 0) === 0
      //     ? "rgba(0, 128, 0, 0.2)"
      //     : "rgba(255, 0, 0, 0.2)",
      // }}
    >
      <div className="flex flex-row">
        <div className={styles.item}>
          <div className={styles.text}>{data.task_name}</div>
          <div className={styles.text}>创建时间: {data.gmt_create}</div>
          <div className={styles.text}>创建人: {data.creator_id}</div>
        </div>
        {isAnalysisIng && (
          <div className={styles.item}>
            <div className={styles.text}>解析中。。。</div>
          </div>
        )}
        {!isAnalysisIng && (
          <>
            <div
              className={classNames(styles.item)}
              style={{ justifyContent: "start" }}
            >
              <div className={classNames(styles.text, "font-bold")}>
                原始模型
              </div>
              <div>
                {map(data.ori_pattern_info, (name) => (
                  <Tag>{name}</Tag>
                ))}
              </div>
            </div>
            <div className={styles.item}>
              <div className={styles.text}>视频：{data.video_num}</div>
              <div className={styles.text}>图像：{data.image_num}</div>
              <div className={styles.text}>音频：{data.audio_num}</div>
              <div className={styles.text}>文档：{data.doc_num}</div>
            </div>
            <div
              className={classNames(styles.item)}
              style={{ justifyContent: "start" }}
            >
              <div className={classNames(styles.text, "font-bold")}>
                业务模型命中数量
              </div>
              <div>
                {map(data.pattern_info, (item) => (
                  <Tag>
                    {item.pattern_name}({item.hit_score}/{item.total_score})
                  </Tag>
                ))}
              </div>
            </div>
          </>
        )}
        <div className={classNames(styles.item, "grid gap-x-1 gap-y-4")}>
          <Typography.Link onClick={onDetail} disabled={isAnalysisIng}>
            详情
          </Typography.Link>

          <div
            onClick={(e) => {
              e.stopPropagation();
            }}
          >
            <Popconfirm
              title="确认是否删除该任务？"
              onConfirm={onDelete}
              okText="确定"
              cancelText="取消"
            >
              <Typography.Link>删除</Typography.Link>
            </Popconfirm>
          </div>
        </div>
      </div>
    </Card>
  );
};

export default ListItm;
